/* ' ' ' ' ' ' ' ' ' ' } */ /********** 1:Swiper用于页面的swiper,因此页面就不需要再加 swiper-bundle.css **********/ .swiper-container {width:100%; height:100%; margin-left:auto; margin-right:auto;} .swiper-slide {text-align:center; font-size:18px; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;/*background:#FFFFFF;*/} .swiper-slide {background-position:left middle; background-repeat:no-repeat; background-size:cover;} .swiper-pagination {top:-2rem!important;} .swiper-pagination-bullet {background-color:#FFF; opacity:0.4; width:0.8rem; height:0.8rem; margin:0 0.5rem;} .swiper-pagination-bullet-active {opacity:1;} /****************************** swiper的Css结束 ******************************/ /** 关于Swiper构建 0: 每次都要给SlideDiv设置width,目前设为1000,配合TopBarA导航的min-width:1000 1: 2: dl,dt用于table结构多行单列, blockquote用于img背景图定位 3:dt手动设置height(vw),为便于定位,使用vertica-align:top; 4:用span,tt控制文字大小和颜色,font-size,line-height都使用vw 5:如果dt内图片,设置图片width(vw),同时不设置dt高度 5:h5控制一行两图片的位置处理(两图片水平排列导致总宽度过大,见万盟数控首页的Banner3图) 4: dd用于单行多列. **/ /** 关于Swiper构建 0: 每次都要给SlideDiv设置width,目前设为1000,配合TopBarA导航的min-width:1000 1: 2: dl,dt用于table结构多行单列, blockquote用于img背景图定位 3:dt手动设置height(vw),为便于定位,使用vertica-align:top; 4:用span,tt控制文字大小和颜色,font-size,line-height都使用vw 5:如果dt内图片,设置图片width(vw),同时不设置dt高度 5:h5控制一行两图片的位置处理(两图片水平排列导致总宽度过大,见万盟数控首页的Banner3图) 4: dd用于单行多列. **/ .SlideDiv {width:1000px; display:table; margin:auto;} .SlideDiv dl {display:table-row} .SlideDiv dl dt {display:table-cell; vertical-align:top; text-align:center;} .SlideDiv dl dt span {font-size:2.8vw; color:#FFF; position:relative; font-weight:bolder; letter-spacing:1px;} .SlideDiv dl dt tt {font-size:1vw; color:#CCC; line-height:1.5vw; position:relative;} .SlideDiv dl dt h6 {display:inline-block; height:100%; overflow:hidden; position:relative; white-space:nowrap;/*仅用于开镜动画*/} .SlideDiv dl dt h5 {margin:auto; position:relative; background-color:#EEE; width:0; height:0;} .SlideDiv dl dt blockquote {position:relative; left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:center top;margin:auto; /*用于把图片放入背景*/} .SlideDiv dl dt blockquote img {position:relative;} .SlideDiv dl dt img {position:relative;width:;} .SlideDiv dl dt blockquote, .SlideDiv dl dt blockquote img, .SlideDiv dl dt img, .SlideDiv dl dt h3, .SlideDiv dl dt h4, .SlideDiv dl dt span, .SlideDiv dl dt tt {opacity:0;} .SlideDiv dd, .SlideDiv li {display:table-cell; vertical-align:top; text-align:left; height:600px; overflow:hidden;} .SlideDiv dd blockquote {position:relative; left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:left top;} .SlideDiv dd blockquote img {position:relative; opacity:0;} .SlideDiv dd img {position:relative; margin-top:0px; opacity:0;} .SlideDiv dd center {width:100%; margin:auto; vertical-align:top; text-align:left; height:0px; position:relative;} .SlideDiv li h3 {position:relative; width:0px; height:0px; /*用于图片重叠的情况*/} .SlideDiv li h3 img {position:relative; opacity:0;} .NumCount {width:20%; text-align:center; color:#000; display:inline-block; padding:5em 0; font-size:1.3rem;} .NumCount span {color:#DA251D; font-size:4em; font-family:Arial,Verdana; font-weight:bolder;} .NumCount tt {color:#DA251D; font-size:1em; margin-left:0.5em;} .NumCount hr {width:40px; border-width:0; height:1px; background-color:#ADBAB3; margin:2vw auto;} .PageTitle {display:table; margin:auto;} .PageTitle dd, .PageTitle dt {display:table-cell; text-align:center; vertical-align:middle;} .PageTitle dd {vertical-align:top; padding-top:1.4em; width:0.4em;} .PageTitle dd:nth-child(3), .PageTitle dd:nth-child(5) {width:4.5em;} .PageTitle dd hr {border-width:0; height:3px; width:100%; background-color:#FFF} .PageTitle dt {color:#FFF; font-family:Arial,Verdana; font-size:1.2em;} .PageTitle dt span {font-size:2.2em; line-height:1.5em; padding:0.3em 1em; font-weight:bolder; letter-spacing:4px;} /*Product使用grid布局,目前的问题是单元格(center)无法使用百分比高度,为解决此问题 1)给center设置 padding-bottom 使用百分比,可以按需求撑开单元格 2)再在子元素中设置文字元素的定位 3)图片使用背景图*/ .item1 {grid-area:1/2/span 2/span 1;} .Grid_Prod {min-width:1000px; max-width:1320px; margin:auto; background-color:#FFF; display:grid; grid-template-columns:1fr 1fr 1fr;} .Grid_Prod center {height:0; padding-bottom:calc(100%*2 / 3); position:relative; overflow:hidden; cursor:pointer; width:100%;} .Grid_Prod center dd, .Grid_Prod center dt {width:100%; height:100%; position:absolute;} .Grid_Prod center dd {z-index:1;background:url() no-repeat center center; background-size:cover; transform: scale(1);} .Grid_Prod center dt {z-index:2;background:url() no-repeat center center; background-size:cover; opacity:0;} .Grid_Prod center blockquote {display:table; height:80%; left:7.5%; top:6%; width:85%; position:absolute; z-index:3; table-layout:fixed; border-collapse:collapse;} .Grid_Prod center blockquote dl {display:table-row;} .Grid_Prod center blockquote dl li {display:table-cell; vertical-align:middle; text-align:left; color:#FFF; box-sizing:border-box;} .Grid_Prod center blockquote dl:nth-child(1) li {height:25%; vertical-align:top; font-size:1.5em; line-height:1.6em; color:#000; text-shadow: 0px 0px 3px #FFF;} .Grid_Prod center blockquote dl:nth-child(2) li {height:60%; font-size:1.1em; color:#EEE; opacity:0;} .Grid_Prod center blockquote dl:nth-child(3) li {height:15%;padding-left:1em;} .Grid_Prod center blockquote dl:nth-child(3) li span {display:inline-block; background-color:#FFF; padding:10px 20px; line-height:20px; color:#DA251D; vertical-align:top; position:relative; left:10px; opacity:0; transition-delay:0s;} .Grid_Prod center blockquote dl:nth-child(3) li span:nth-child(2) {border-left:#DA251D 1px solid; font-size:15px;} .Grid_Prod center:hover dd {transform:scale(1.1);} .Grid_Prod center:hover dt {opacity:0.9;} .Grid_Prod center:hover blockquote dl:nth-child(1) li {color:#FFF; text-shadow: 0px 0px 0px #FFF;transition:all 0.5s linear 0.3s;} .Grid_Prod center:hover blockquote dl:nth-child(2) li {opacity:1; transition:all 0.5s linear 0.3s;} .Grid_Prod center:hover blockquote dl:nth-child(3) li span {opacity:1; left:0px; transition:all 0.3s ease-out 0.4s;} .Grid_Prod center blockquote dl:nth-child(3) li tt:hover span {color:#FFF; background-color:#C1211A; transition-delay:0s;} .PageMore {padding:1.6em 0; margin:auto;} .PageMore span {font-size:1.3em;} .PageMore span a:link, .PageMore span a:visited {color:#DA261E;} .PageMore span a:hover {color:#000;} .PageMore span hr {margin-top:0em; height:3px; background-color:#DA261E; border-width:0; display:inline-block;} .GSolution {margin:atuo; width:100%; height:0; padding-bottom:calc(100%*4/3); overflow:hidden; position:relative;} .GSolution dd, .GSolution dt {height:50%; width:100%; left:0; top:0; overflow:hidden; position:absolute; margin:0; box-sizing:border-box;} /*解决方案*/ .GSolution dd {background-color:#000;} .GSolution dd img {width:100%; margin:auto; border-width:0; transform:scale(1); opacity:0.8; transition:all 0.3s ease-out 0s;} .GSolution p {width:100%; height:0; top:50%; position:absolute; z-index:1;} .GSolution p i {position:absolute; bottom:-15px; left:47%; font-size:2.7em; color:#FFF;} .GSolution dt {position:absolute; top:50%; display:table;} .GSolution dt center {display:table-cell; vertical-align:middle;} .GSolution dt center h2 {position:relative; height:0; width:0; margin:auto; opacity:0; transition:all 0.3s ease-out 0s;} .GSolution dt center h2 span {position:absolute; font-size:4.3em; top:-0.25em; left:-0.6em; font-family:Arial,Verdana; color:#000; font-weight:bolder; font-style:italic;} .GSolution dt center h3 {color:#CCC; font-size:2em; font-family:Arial,Verdana; opacity:1; text-align:center; transition:all 0.5s linear 0.5s;} .GSolution dt center h4 {color:#000; font-weight:bolder; font-size:1.4em; letter-spacing:0px; text-align:center; transition:all 0.3s linear 0s;} .GSolution dt center h5 {height:2.5em; vertical-align:middle;} .GSolution dt center h5 hr {width:3em; background-color:#BBB; height:1px; border-width:0; top:1.0em; position:relative;} .GSolution dt center h6 {color:#000; opacity:0.5; font-size:0.9em; line-height:1.2em; padding:0 10%; transition:all 0.3s linear 0s;} .GSolution:hover dd img {transform:scale(1.2); opacity:1; transition:all 0.3s ease-out 0s;} .GSolution:hover dt center h3 {opacity:0; transition:all 0.4s linear 0s;} .GSolution:hover dt center h2 {opacity:0.15; transform:scale(1.1); transition:all 0.5s linear 0.5s;} .GSolution:hover dt center h4 {color:#DA251D; letter-spacing:5px; transition:all 0.4s ease-out 0s;} .GSolution:hover dt center h6 {opacity:0.9; transition:all 0.6s ease-out 0s;} .GNews {display:table;100%; margin:auto; border-top:#777 1px solid;} .GNews dd {display:table-cell; text-align:center; vertical-align:top; box-sizing:border-box;} .GNews dd:nth-child(1) {width:26%; padding:1.2em 0; background-color:#575757;} .GNews dd:nth-child(1) h3 {width:82%; color:rgba(255,255,255,0.3); font-size:2.4em; font-family:Arial,Verdana; font-weight:bolder; text-align:left; margin:auto;} .GNews dd:nth-child(1) h3 img {width:100%; height:auto; opacity:0.7; position:relative; box-shadow:5px 5px 10px 2px rgba(0,0,0,0.4);} .GNews dd:nth-child(2) {width:24%; padding:2em 3% 0 3%; background-color:#4A4A4A;} .GNews dd:nth-child(2) h3 {height:8em;} .GNews dd:nth-child(2) h3 p {background-color:#CE1920; border-radius:50%; width:6em; margin:auto; display:table;} .GNews dd:nth-child(2) h3 p span {display:table-cell; color:#FFF; height:6em; vertical-align:middle; text-align:center;} .GNews dd:nth-child(2) h3 p tt {font-size:2.2em; font-family:Arial,Verdana; line-height:0.3em; position:relative; top:0.1em;} .GNews dd:nth-child(2) h3 p tt tt {font-size:0.5em; font-weight:lighter;} .GNews dd:nth-child(2) h4 {height:6em; font-size:1.3em; line-height:1.6em; font-weight:bolder; color:#FFF; text-align:left;} .GNews dd:nth-child(2) h5 {width:50%; height:2.4em; line-height:2.4em; text-align:center; background-color:#4A4A4A; border:rgba(2255,255,255,0.6) 1px solid;; border-radius:0.3em; margin:auto; font-size:0.9em;} .GNews dd:nth-child(2) h5 a:link, .GNews dd:nth-child(2) h5 a:visited {color:#999;} .GNews dd:nth-child(2) h5 a:hover {color:#FFF;} .GNews dd:nth-child(3) {width:50%; background-color:#353535; padding:0 1.5em 1.0em 3.5em;} .GNews dd:nth-child(3) center {display:table; border-bottom:#5D5D5D 1px solid;} .GNews dd:nth-child(3) center dl {display:table-row} .GNews dd:nth-child(3) center dl li, .GNews dd:nth-child(3) center dl p {display:table-cell;} .GNews dd:nth-child(3) center dl p {height:0.8em;} .GNews dd:nth-child(3) center dl li:nth-child(1) {width:8em; text-align:center; color:#DDD; font-size:1.0em; vertical-align:middle; white-space:nowrap;} .GNews dd:nth-child(3) center dl li:nth-child(1) span {font-size:2.6em; font-family:Arial,Verdana; line-height:1em color:#FFF;} .GNews dd:nth-child(3) center dl li:nth-child(2) {width:1.5em; border-left:#5D5D5D 1px solid;} .GNews dd:nth-child(3) center dl li:nth-child(3) {text-align:left;} .GNews dd:nth-child(3) center dl li:nth-child(3) h3 {height:1.5em; font-size:1.3em; color:#FFF; text-overflow:ellipsis; overflow:hidden;background-color:#333; position:relative; left:0px; transition:all 0.6s ease-out 0s;} .GNews dd:nth-child(3) center dl li:nth-child(3) h4 {max-height:2.8em; line-height:1.4em; overflow:hidden; color:#FFF; opacity:0.5; font-size:1.0em; margin-bottom:1em; transition:all 0.6s linear 0s;} .GNews dd:nth-child(3) center dl:nth-child(2):hover li:nth-child(1) span {color:#DA251D;} .GNews dd:nth-child(3) center dl:nth-child(2):hover li:nth-child(1) {color:#DA251D;} .GNews dd:nth-child(3) center dl:nth-child(2):hover li:nth-child(3) h3 {left:8px; color:#FF0; transition:all 0.6s ease-out 0s;} .GNews dd:nth-child(3) center dl:nth-child(2):hover li:nth-child(3) h4 {opacity:1; transition:all 0.6s linear 0s;} .GBrief {display:table;} .GBrief dd {display:table-cell; text-align:left; box-sizing:border-box;} .GBrief dd:nth-child(1) {width:60%; overflow:hidden; vertical-align:middle; position:relative;} .GBrief dd:nth-child(1) img {width:90%; height:auto; position:absolute; z-index:1; top:0; transform:scale(1);} .GBrief dd:nth-child(2) {width:45%; color:#000; vertical-align:top;} .GBrief dd:nth-child(2) h3 {padding:0.3em 0 0.5em 0; font-size:1.9em; font-family:"Microsoft PhagsPa","Microsoft YaHei","微软雅黑"; font-weight:bolder;} .GBrief dd:nth-child(2) h4 {font-size:1.7em; line-height:1.1em;} .GBrief dd:nth-child(2) h4 span {font-size:0.8em; font-weight:normal; color:#888;} .GBrief dd:nth-child(2) h4 hr {background-color:#CE1920; border-width:0; height:3px; display:inline-block;} .GBrief dd:nth-child(2) h5 {padding-top:0.2em; height:22em;} .GBrief dd:nth-child(2) h5 p {font-size:1.5em; line-height:1.4em; padding:0.2em 0; text-indent:2em;/*font-family:"楷体";color:#676767;*/} .GBrief dd:nth-child(2) h5 p:nth-child(1) {font-family:"Microsoft PhagsPa","Microsoft YaHei","微软雅黑"; color:#000; font-size:1.5em;} .GBrief dd:nth-child(2) h6 {text-align:left;} .GBrief dd:nth-child(2) h6 span {display:inline-block; font-size:1.4em!important; color:#FFF; background-color:#CE1920; height:2.5em; width:2.5em; line-height:2.5em; text-align:center;} .GBrief dd:nth-child(2) h6 span:nth-child(1) {width:6em; border-right:#FFF 1px solid;} .GBrief dd:nth-child(2) h6 span i {font-size:1.4em; position:relative; transition:all 0.4s linear 0s;} .GBrief dd:nth-child(2) h6 a:hover span {background-color:#CCC; border-right:#FFF 1px solid; color:#CE1920;} .GBrief dd:nth-child(2) h6 a:hover span i {left:5px; transition:all 0.3s linear 0.2s;} .ImgLarge {transform:scale(1.05)!important; transition:all 0.5s ease-out;} .ImgSmall {transform:scale(1)!important;transition:all 0.5s ease-out;} .ImgLargeA {opacity:1!important; transform:scale(1.15)!important; transition:all 0.5s ease-out;}